<template>
    <div class="button">
        <el-button type="primary" @click="isOpen=true">达梦数据库</el-button>

        <el-dialog v-model="isOpen" title="选择在线数据">
            <div class="container">
                <div class="table-list">
                    <p class="list-title">表名列表</p>

                    <div class="table-items">
                        <div v-for="tableName in tables" :key="tableName" :class="['table-item', tableNow === tableName ? 'active' : '']" @click="handleTableClick(tableName)">
                            {{ tableName }}
                        </div>
                    </div>
                </div>

                <div class="column-list" v-loading="loading">
                    <p class="list-title">字段列表</p>

                    <el-checkbox-group v-model="columnSelected" class="checkbox-group">
                        <el-checkbox v-for="column in columnAll" :key="column" :label="column" class="checkbox-item">
                            {{ column }}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>

            <el-form-item class="button-group">
                <el-button type="warning" @click="goCancel">取消</el-button>
                <el-button type="primary" @click="goOk">确认</el-button>
            </el-form-item>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref, watch }               from "vue"
import { getColumns, getTableData, getTables } from "@/api/dm.js"
import { ElMessage }                           from "element-plus"

let isOpen         = ref(false)
let tables         = ref([])
let tableNow       = ref("")
let columnAll      = ref([])
let columnSelected = ref([])
let loading        = ref(false)
let emits          = defineEmits([ "dataChange" ])

// 在原有变量定义后添加
watch(columnSelected, (newVal) => {
    // 限制最多选择10个
    if(newVal.length > 10){
        // 超出时保留前10个
        columnSelected.value = newVal.slice(0, 10)
        ElMessage.warning("最多只能选择10个字段")
    }
})

function handleTableClick(table){
    if(tableNow.value === table){
        return
    }

    tableNow.value       = table
    columnSelected.value = []

    loading.value = true
    getColumns(table).then(res => {
        columnAll.value = res.data
    }).finally(() =>
        loading.value = false,
    )
}

function goOk(){
    if(!tableNow.value){
        return
    }

    let params = {
        table  : tableNow.value,
        columns: columnSelected.value,
    }

    getTableData(params).then(res => {
        emits("dataChange", res.data)
        isOpen.value = false
    })
}

function goCancel(){
    isOpen.value = false
}

function load(){
    loading.value = true
    getTables().then(res => {
        tables.value = res.data
    }).finally(() =>
        loading.value = false,
    )
}

onMounted(() => {
    load()
})
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    gap: 20px;
    height: 400px;
    padding: 10px 0;

    .table-list, .column-list {
        flex: 1;
        border: 1px solid #e5e7eb;
        border-radius: 4px;
        overflow: hidden;
    }

    .list-title {
        margin: 0;
        padding: 10px 15px;
        background-color: #f5f7fa;
        border-bottom: 1px solid #e5e7eb;
        font-size: 14px;
        font-weight: 500;
    }

    .table-items {
        height: calc(100% - 41px);
        overflow-y: auto;
        padding: 10px;
    }

    .table-item {
        padding: 8px 10px;
        margin-bottom: 5px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
            background-color: #f0f2f5;
        }

        &.active {
            background-color: #409eff;
            color: white;
        }
    }

    .checkbox-group {
        height: calc(100% - 41px);
        overflow-y: auto;
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .checkbox-item {
        margin: 0 !important;
        width: calc(100% - 10px);
    }

    .button-group {
        margin-top: 15px;
        text-align: right;
    }
}
</style>
